import React, { createContext, useContext } from "react";

// useContext主要是用来简化Consumer接收的写法的
const context = createContext();

// const Child = () => {
//   return (
//     <div>
//       child子组件 -{" "}
//       <context.Consumer>
//         {(value) => {
//           return <span>{value.count}</span>;
//         }}
//       </context.Consumer>
//     </div>
//   );
// };

const Child = () => {
  const { count } = useContext(context);
  return <div>child子组件 - {count}</div>;
};

const App = () => {
  return (
    <context.Provider
      value={{
        count: 10,
      }}
    >
      <h2>useContext</h2>
      <Child />
    </context.Provider>
  );
};

export default App;
